<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      label-width="90px"
    >
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="queryParams.startTime"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="date"
          clearable
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="queryParams.endTime"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="date"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search">开始查询</el-button>
        <el-button icon="Refresh">轨迹回放</el-button>
      </el-form-item>
    </el-form>

    <div style="width: 100%">
      <el-row :gutter="20" style="width: 100%">
        <el-col :span="18">
          <img :src="_imports_1" class="imgStyle" alt="巡更路线" />
        </el-col>
        <el-col :span="6">
          <el-table v-loading="loading" :data="recordsList">
            <!-- <el-table-column
              label="序号"
              width="50"
              align="center"
              type="index"
            /> -->
            <el-table-column
              label="巡更记录"
              width="150"
              align="center"
              prop="date"
            />
            <el-table-column label="查看" align="center">
              <template #default="scope">
                <el-button
                  text
                  type="primary"
                  icon="View"
                  @click="handleView(scope.row)"
                  v-hasPermi="['gallery:records:detail']"
                  >播放
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 20px">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['alarm:records:add']"
            >标绘路线</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['alarm:records:edit']"
            >清除</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['alarm:records:export']"
            >生出路线</el-button
          >
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import _imports_1 from '@/assets/images/1.png'

import { zoneTreeSelect } from '@/api/emergency/mats'

const { proxy } = getCurrentInstance()

/* 获取单位字典 */
const { sys_basicequ_status } = proxy.useDict('sys_basicequ_status')

const single = ref(true)
const multiple = ref(true)
const loading = ref(false)
const zoneOptions = ref([])
const recordsList = ref([])
const total = ref(20)

const mocks = [
  {
    id: 1,
    date: '2021-01-01 12:00'
  },
  {
    id: 2,
    date: '2021-09-01 17:00'
  },
  {
    id: 3,
    date: '2021-02-01 14:00'
  },
  {
    id: 4,
    date: '2021-04-01 18:00'
  },
  {
    id: 5,
    date: '2022-01-01 11:00'
  }
]

recordsList.value = mocks

const data = reactive({
  queryParams: { pageNum: 1, pageSize: 10 }
})
const { queryParams } = toRefs(data)

/** 存放位置树结构 */
function getZoneTree() {
  return zoneTreeSelect().then((response) => {
    zoneOptions.value = response.data
  })
}

function getList() {}

function handleAdd() {}

function handleUpdate() {}

function handleDelete() {}

function handleExport() {}

function handleView() {}

// 获取最新搜索下拉选项
getZoneTree()

getList()
</script>
<style lang="scss" scoped>
.mr {
  margin-right: 10px;
}
:deep .pagination-container {
  height: 56px;
}
.img-item {
  margin-bottom: 15px;
}
.imgStyle {
  width: 100%;
}
</style>
